<template>
	<view class="edit_main">
		<view class="head_box">
			<image @tap="uploadimg" class="head_avtar" :src="photo_cdn+edit_info.avatar"></image>
			<view style="margin-left: 24rpx;">
				<view class="head_name">{{edit_info.nickname}}</view>
				<view class="head_adress">{{address_name}}</view>
			</view>
		</view>
		
		<view class="card_title">基本信息</view>
		<view class="edit_card">
			<view class="edit_op" @click="open">
				<view class="op_title">预设头像</view>
				<image class="op_jian" :src="photo_cdn+'/zpupload/static/tablet/more.png'"></image>
			</view>
			<view class="edit_op" @tap="uploadimg">
				<view class="op_title">上传头像</view>
				<image class="op_jian" :src="photo_cdn+'/zpupload/static/tablet/more.png'"></image>
			</view>
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">昵称修改</view>
					<input class="edit_input_tag" v-model="edit_info.nickname" type="text" value="" placeholder="请输入昵称" ></input>					
				</view>
			</view>
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">真实姓名</view>
					<input class="edit_input_tag" v-model="edit_info.realname" type="text" value="" placeholder="请输入您的真实姓名" ></input>					
				</view>
			</view>
			<view class="edit_op">
				<view class="flex" @tap="toselectpage">
					<view class="op_title">家族姓氏</view>
					<input class="edit_input_tag" :disabled="true" v-model="surname_title" type="text" value="" placeholder="请选择姓氏" ></input>
				</view>
			</view>
			<lpicker v-model="address_name" @clearelech="clearelech" @select="lpicker_select">
				<view class="edit_op">
					<view class="flex">
						<view class="op_title">常驻地</view>				
						<input class="edit_input_tag" v-model="address_name" type="text" value="" placeholder="请选择所在地" :disabled="true" style="width: 500rpx;"></input>
					</view>
					<image v-if="!address_name" class="op_jian" :src="photo_cdn+'/zpupload/static/tablet/more.png'"></image>
				</view>
			</lpicker>
			
			
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">详细地址</view>
					<input class="edit_input_tag" v-model="edit_info.address_info" type="text" value="" placeholder="请输入您的详细地址" ></input>					
				</view>
			</view>
			
			
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">家庭地址</view>
					<input class="edit_input_tag" v-model="edit_info.address" type="text" value="" placeholder="请输入您的家庭地址" ></input>					
				</view>
			</view>
			
			
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">祖籍地</view>
					<input class="edit_input_tag" v-model="edit_info.native_place" type="text" value="" placeholder="请输入您的祖籍地" ></input>					
				</view>
			</view>
			

		</view>
		
		<view class="edit_card">						
			<!-- <view class="edit_op" @tap="getuserxb">
				<view class="flex">
					<view class="op_title">性别</view>
					<view class="edit_input_tag" v-if="edit_info.sex===1">男</view>
					<view class="edit_input_tag" v-else-if="edit_info.sex===2">女</view>
					<view class="edit_input_tag" v-else>请选择性别</view>
				</view>
				<image class="op_jian" src="/st1atic/tablet/more.png"></image>
			</view> -->
			<!-- <view class="edit_op" @tap="showpicker">
				<view class="flex">
					<view class="op_title">生日</view>
					<input class="edit_input_tag" v-model="edit_info.birthday" type="text" value="" placeholder="请选择生日" :disabled="true"></input>
				</view>
				<image class="op_jian" src="/st1atic/tablet/more.png"></image>
			</view> -->
			<!-- <view class="edit_op">
				<view class="flex">
					<view class="op_title">电话</view>
					<input class="edit_input_tag" v-model="edit_info.phone" type="number" value="" placeholder="请输入电话" ></input>
				</view>
			</view> -->
		</view>
		
		<!--<view class="edit_card">
			<lpicker v-model="ancestry.ancestral" @clearelech="clearelech1" @select="lpicker_select1">
				<view class="edit_op">
					<view class="flex">
						<view class="op_title">祖籍地</view>
						<input class="edit_input_tag" v-model="ancestry.ancestral" type="text" value="" placeholder="请选择祖籍地"></input>
					</view>
					<image class="op_jian" src="/sta1tic/tablet/more.png"></image>
				</view>
			</lpicker>
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">始祖</view>
					<input class="edit_input_tag" v-model="edit_info.antor" type="text" value=""></input>
				</view>
			</view>
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">子辈</view>
					<input class="edit_input_tag" v-model="edit_info.son" type="text" value=""></input>
				</view>				
			</view>
			<view class="edit_op">
				<view class="flex">
					<view class="op_title">堂号</view>
					<input class="edit_input_tag" v-model="edit_info.hall" type="text" value="" ></input>
				</view>				
			</view>
		</view> -->
		<view class="card_title">教育经历</view>
		<view class="edit_card">
			<view v-show="item!=''" class="edu_info" v-for="(item,index) in educational" :key="index" @tap="toschool(index)">
				<view>
					<view class="edu_info_title">{{item.school}}</view>
					<view class="flex">
						<view class="edu_info_txt">{{item.education}}</view>
						<view v-if="item.major" class="edu_info_txt">{{item.major}}</view>
						<view class="edu_info_txt">{{item.time}} 入学</view>
					</view>
				</view>
				<image class="eduimg"  :src="photo_cdn+'/zpupload/static/user/jiantoua.png'" mode="heightFix"></image>
			</view>
			<view class="edit_cen">
				<navigator url="/pages/mine/myschool/myschool" hover-class="none" class="add_title">添加学校</navigator>
			</view>
		</view>
		
		<view class="card_title">工作经历</view>
		<view class="edit_card">
			<view v-if="item!=''" v-for="(item,index) in work_experience" :key="index" @tap="towork(index)">
				<view class="edu_info">
					<view>
						<view class="edu_info_title">{{item.company}}</view>
						<view class="flex">
							<view class="edu_info_txt">{{item.job}}</view>
							<view class="edu_info_txt">{{item.time}}</view>
						</view>
					</view>
					<image class="eduimg" :src="photo_cdn+'/zpupload/static/user/jiantoua.png'" mode="heightFix"></image>
				</view>
			</view>
			<view class="edit_cen">
				<navigator url="/pages/mine/addcompany/addcompany" hover-class="none" class="add_title">添加单位</navigator>
			</view>
		</view>
		
		<view class="edit_btn_footer ">
			<view class="edit_btn" @tap="tosub">提交</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="" style="width: 700rpx; background-color: #fff; border-radius: 5%;padding-bottom: 30rpx; ">
				<view class="" style="display: flex;flex-wrap:wrap; margin-top: 30rpx; padding-top: 30rpx;">
					<view :class="imgstate == index ? 'selborder': ''" style="margin: 7rpx auto;width: 200rpx; height: 200rpx; " v-for="(item,index) in imgList" :key="index"  @tap="selimg(index)">
						<image  style="width: 190rpx; height: 190rpx; border-radius: 5%;" :src="photo_cdn+item.url"></image>
					</view>
					<view class="" style="display: flex; justify-content: center;width: 100%;align-items: center;margin-bottom: 15rpx;">
						<button type="primary" size="mini"  @tap="selimgstate()">选中头像</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn,uploadFile} = config.baseUrl;
	import {getAddrInfo} from "@/utils/api/zupu.js"
	import {getUserinfo} from "@/utils/api/api.js";
	import {updateUserinfo,getUserAvatar} from "@/utils/api/user.js"
	import lpicker from "@/components/lpicker/lpicker.vue";
	export default{
		components:{
			lpicker,
		},
		data(){
			return{
				photo_cdn,
				surname_title:'',//姓氏
				userInfo:{},
				edit_info:{
					avatar:'',//头像					
					//sex:'',//性别
					nickname:'',//昵称
					realname:'',//名字
					surname_id:'',//姓氏id
					//birthday:'',//生日
					//phone:'',//电话				
					// antor:'',//始祖
					// son:'',//子辈
					// hall:'',//堂号
					province_id:"",//省id
					city_id:"",//市id
					area_id:"",//区县id
					town_id:"",//街道id
					village_id:"",//村管委会					
				},
				work_experience:[],//工作经历
				educational:[],//教育经历
				start_time:'',
				end_time:'',
				address_name:'',//所在地文字
				// ancestry:{
				// 	ancestral:'',//祖籍地
				// 	province_id:"",//省id
				// 	city_id:"",//市id
				// 	area_id:"",//区县id
				// 	town_id:"",//街道id
				// 	village_id:"",//村管委会
				// },
				show:false,
				imgstate:0,
				imgList:[
					{
						id:1,
						url:'zpupload/userinfo/1.png',
						
					},
					{
						id:2,
						url:'zpupload/userinfo/2.png',
					},
					{
						id:3,
						url:'zpupload/userinfo/3.png',
					},
					{
						id:4,
						url:'zpupload/userinfo/4.png',
					},
					{
						id:5,
						url:'zpupload/userinfo/5.png',
					},
					{
						id:6,
						url:'zpupload/userinfo/6.png',
					}
				],
				join:false
				
			}
		},
		onLoad(Option){
			let token = uni.getStorageSync("token");
			if (!token) {
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					this.isshowlogin = true;
				}, 1500)
				// #endif
			} else {
				this.getUserinfofun();
			}
			
			if(Option.type){
				console.log("赋值")
				this.join = true;
			}
		},
		onShow(){
			// this.edit_info.avatar = uni.getStorageSync("userinfo").avatar;//头像
			this.surname_title = uni.getStorageSync("select_surname_name");//姓氏
			this.edit_info.surname_id = uni.getStorageSync("st_surname_id");//姓氏id
			this.work_experience = uni.getStorageSync("work_experience");//工作经历
			this.educational = uni.getStorageSync("educational");//教育经历
		},
		onUnload(){
			uni.removeStorageSync('select_surname_name');
			uni.removeStorageSync('st_surname_id');
			uni.removeStorageSync('work_experience');
			uni.removeStorageSync('educational');
		},
		methods:{
			//弹出层开关
			selimgstate(){
				updateUserinfo({
					avatar:this.imgList[this.imgstate].url								
				}).then(res=>{
					this.$api.msg(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							this.close();
							uni.switchTab({
								url:'/pages/user/user'
							})
						},1500)	
					}
				})
			},
			selimg(e){
				this.imgstate = e;
			},
			open() {
				getUserAvatar().then(res=>{
					if(res.code==1){
						this.imgList = res.data.list;
					}
				})
				this.$refs.popup.open('top');
				this.imgstate = 0;
			},
			close() {
				this.$refs.popup.close()
			},
			//上传图片
			uploadimg(){
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								this.edit_info.avatar = data.url;	
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			//清楚选中的五级地址数据
			clearelech(e){
				this.edit_info.province_id = "";
				this.edit_info.city_id = "";
				this.edit_info.area_id = "";
				this.edit_info.town_id = "";
				this.edit_info.village_id = "";
			},
			clearelech1(e){
				this.ancestry.province_id = "";
				this.ancestry.city_id = "";
				this.ancestry.area_id = "";
				this.ancestry.town_id = "";
				this.ancestry.village_id = "";
			},
			//监听五级地址选中
			lpicker_select(e){
				this.edit_info.province_id = e.province_id;
				this.edit_info.city_id = e.city_id;
				this.edit_info.area_id = e.area_id;
				this.edit_info.town_id = e.town_id;
				this.edit_info.village_id = e.village_id;
			},
			lpicker_select1(e){
				this.ancestry.province_id = e.province_id;
				this.ancestry.city_id = e.city_id;
				this.ancestry.area_id = e.area_id;
				this.ancestry.town_id = e.town_id;
				this.ancestry.village_id = e.village_id;
			},
			//解析省市区的文字
			analysisfun(){
				let search_id = "",search_type = "";
				if(this.edit_info.area_id){
					search_id = this.edit_info.area_id;
					search_type = 3;
				}
				if(this.edit_info.town_id){
					search_id = this.edit_info.town_id;
					search_type = 2;
				}
				if(this.edit_info.village_id){
					search_id = this.edit_info.village_id;
					search_type = 1;
				}
				getAddrInfo({
					ID:search_id,
					type:search_type,
				}).then((res)=>{
					if(res.code==1){
						let trueAddr = "";
						if(!res.data){
							return false;
						}
						if(res.data.area){
							trueAddr+= res.data.area.MergerName;
						}
						if(res.data.town){
							trueAddr+= res.data.town.name;
						}
						if(res.data.village){
							trueAddr+= res.data.village.name;
						}
						this.address_name = trueAddr;
					}
				})
			},
			//选择性别
			getuserxb(){
				uni.showActionSheet({
					itemList: ['男','女'],
					success:  (res)=> {
						if(res.tapIndex==0){
							this.edit_info.sex = 1;
						}else if(res.tapIndex==1){
							this.edit_info.sex = 2;
						}
					},
					fail:  (res)=> {
						console.log(res.errMsg);
					}
				});	
			},
			showpicker(){
				this.$refs.picker.show();	
			},
			toschool(index){
				uni.navigateTo({
					url:`/pages/mine/myschool/myschool?index=${index}`
				})
			},
			tosub(){
				if(!this.address_name){
					this.$api.msg("常驻地不能为空");
					return false;
				}
				if(!this.edit_info.realname){
					this.$api.msg("真是姓名不能为空");
					return false;
				}
				if(!this.surname_title){
					this.$api.msg("家族姓氏不能为空!");
					return false;
				}
				if(!this.edit_info.nickname){
					this.$api.msg("用户昵称不能为空!");
					return false;
				}
				
				if(this.work_experience.company=='' || this.work_experience.job=='' || this.work_experience.time==''){
					this.work_experience = []
				}
				//这里不要做表单验证~
				updateUserinfo({
					...this.edit_info,
					educational:this.educational,
					work_experience:this.work_experience										
				}).then(res=>{
					this.$api.msg(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							console.log('成功了！')
							if(this.join){
								uni.reLaunch({
									url: '/pages/zupu/join/join'
								})
								return;
							}else{
								uni.switchTab({
									url:'/pages/user/user'
								})
							}
						},1500)	
					}
				})
			},
			getUserinfofun(){
				getUserinfo({
					
				}).then(res=>{
					if(res.code==1){
						this.userInfo = res.data.userinfo;
						this.surname_title = this.userInfo.Surname;
						this.edit_info.surname_id = this.userInfo.surname_id;
						uni.setStorageSync("select_surname_name",this.surname_title);
						uni.setStorageSync("st_surname_id",this.edit_info.surname_id);	
						for(var key in  this.edit_info){
							if(this.userInfo[key]){
								this.edit_info[key] = this.userInfo[key];
							}
						}
						if(this.userInfo.addr_name){
							let address_name = this.userInfo.addr_name
							this.address_name = address_name.province+address_name.city+address_name.county+address_name.town+address_name.village;
						}
						this.educational = 	this.userInfo.educational				
						this.work_experience = this.userInfo.work_experience;
						uni.setStorageSync("educational",this.educational);
						uni.setStorageSync("work_experience",this.work_experience);
					}
				})
			},
			//前往选择 姓
			toselectpage(){
				uni.navigateTo({
					url:"/pages/zupu/choice_surname/choice_surname?source=1",
				})
			},
			//更改工作经历
			towork(index){
				console.log(index,'index')
				uni.navigateTo({
					url:`/pages/mine/addcompany/addcompany?index=${index}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.selborder { 
		border: 5rpx solid red;
		border-radius: 5%;
	}
	@import "./editinfo.scss"
</style>